<template>
  <el-card class="forum-card" shadow="hover" style="max-width: 1200px; margin: 50px auto; background: #f8f9fa; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
    <template #header>
      <div class="card-header" style="display: flex; justify-content: center; font-size: 24px; color: #2c3e50;">
        <span>论坛页面</span>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="热门帖子" name="1">
            <el-list>
              <el-list-item v-for="(post, index) in hotPosts" :key="index">{{ post.title }}</el-list-item>
            </el-list>
          </el-tab-pane>
          <el-tab-pane label="最新帖子" name="2">
            <el-list>
              <el-list-item v-for="(post, index) in newPosts" :key="index">{{ post.title }}</el-list-item>
            </el-list>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="12">
        <div ref="chartRef" style="width: 100%; height: 400px;"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const activeTab = ref('1')
const chartRef = ref(null)

const hotPosts = ref([
  { title: '热门帖子1' },
  { title: '热门帖子2' },
  { title: '热门帖子3' }
])

const newPosts = ref([
  { title: '最新帖子1' },
  { title: '最新帖子2' },
  { title: '最新帖子3' }
])

onMounted(() => {
  const chart = echarts.init(chartRef.value)
  const option = {
    title: {
      text: '论坛帖子分布'
    },
    tooltip: {},
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {},
    series: [{
      name: '帖子数量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 15]
    }]
  }
  chart.setOption(option)
})
</script>

<style scoped>
.forum-card {
  padding: 20px;
}
.card-header {
  margin-bottom: 20px;
}
</style>